/*   
    Dependent scripts: jQuery 1.6, jQuery UI 1.8.13 (selectable)
    Introduction: Creates 2 connected listboxes boxA & boxB. Upon databind, boxA will be populated with data,
    Example:

    listboxes = <div>
    data = json data
    dataDisplayName = the key of the json data which
    $("#listboxes").connectedLists({
                        data: data.d,
                        dataDisplayName: "staffname"
                    });
*/

(function ($) {

    /* private functions*/

    //creates the lists html element
    var createLists = function () {
        var lists = $(                                                
                        "<div class='cl_Container' runat='server'>" +
                            "<table width='85%'><tr><td width='25%' style='padding-left:0px; padding-right:0px'>" +
                                "<asp:Label id='lblHeader1' runat='server'></asp:Label>" +
                            "</td><td width='5%' style='padding-left:0px; padding-right:0px'>" +
                                "&nbsp;" +
                            "</td><td width='25%' style='padding-left:0px; padding-right:0px'>" +
                                "<asp:Label id='lblHeader2' runat='server'></asp:Label>" +
                            "</td><td width='5%' style='padding-left:0px; padding-right:0px'>" +
                                "&nbsp;" +
                            "</td><td width='25%' style='padding-left:0px; padding-right:0px'>" +
                                "<asp:Label id='lblHeader3' runat='server'></asp:Label>" +
                            "</td></tr>" +

                            "<tr><td style='padding-left:0px; padding-right:0px'>" +
                                "<ul id='cl_origin' class='cl_list' runat='server'></ul>" +
                            "</td><td style='padding-left:0px; padding-right:0px'>" +
                                "<div class='cl_buttonHolder'>" +
                                    "<img class='cl_addBtn_OA' src ='/_layouts/NCS.OCP.Resource/images/add_sign.png' alt='Add' />" +
                                    "<img class='cl_removeBtn_OA' src ='/_layouts/NCS.OCP.Resource/images/remove_sign.png' alt='Remove' />" +
                                "</div>" +
                            "</td><td style='padding-left:0px; padding-right:0px'>" +
                                "<ul id='cl_boxA' class='cl_list' runat='server'></ul>" +
                            "</td><td style='padding-left:0px; padding-right:0px'>" +
                                "<div class='cl_buttonHolder'>" +
                                    "<img class='cl_addBtn_AB' src ='/_layouts/NCS.OCP.Resource/images/add_sign.png' alt='Add' />" +
                                    "<img class='cl_removeBtn_AB' src ='/_layouts/NCS.OCP.Resource/images/remove_sign.png' alt='Remove' />" +
                                "</div>" +
                            "</td><td style='padding-left:0px; padding-right:0px'>" +
                                "<ul id='cl_boxB' class='cl_list' runat='server'></ul>" +
                            "</td></tr>" +
                            "</table>" +
                         "</div>"
                        );
        return lists;
    };

    var itemExist = function (ul, li) {
        var li = $(ul).find(li.id);
        if (li != null)
            return true;
        else
            return false;
    }

    /* end*/

    //plugin starts here
    $.fn.connectedLists = function (options) {

        var selectedItem = null;

        //main context object which stores all relevant elements and data
        //this context object will be init along the way
        var context =
        {
            origin: null,
            boxA: null,
            boxB: null,
            currentSelectedItem: null,
            data: null,
            ajaxUrl: ''
        };

        //check container exist
        if (this == null)
            return;

        //default settings
        var settings =
        {
            data: null,
            ajax: '',
            dataDisplayName: '',
            listHeader1: '',
            listHeader2: '',
            listHeader3: ''
        };

        // If options exist, lets merge them
        // with our default settings
        if (options) {
            $.extend(settings, options);
        }

        /* init option */

        //check data availability        
        if (settings.data == null)
            return;
        else
        //init context
            context.data = settings.data;

        /* init end */

        /*
        public func - rebind data
        */
        $.fn.connectedLists.rebind = function (jsonArray) {
            if (jsonArray == null && jsonArray.length <= 0)
                return;
        };

        /* public func end */

        /* logic start */

        //call private function: creates 3 listboxes & add remove buttons
        var lists = createLists();

        lists.find("#lblHeader1").text(settings.listHeader1);
        lists.find("#lblHeader2").text(settings.listHeader2);
        lists.find("#lblHeader3").text(settings.listHeader3);

        //get origin box
        var origin = lists.find("#cl_origin");
        //init context
        context.origin = origin;
        //make selectable
        origin.selectable({
            //selected event
            selected: function (event, ui) {
                //store selected elements to global variable
                if (ui.selected != null) {
                    selectedItem = ui.selected;
                    //init context
                    context.currentSelectedItem = $(ui.selected);
                }
            }
        });

        //get box from & make selectable
        //Note: add logic here
        var boxA = lists.find("#cl_boxA");
        //init context
        context.boxA = boxA;
        //make selectable
        boxA.selectable({
            //selected event
            selected: function (event, ui) {
                //store selected elements to global variable
                if (ui.selected != null) {
                    selectedItem = ui.selected;
                    //init context
                    context.currentSelectedItem = $(ui.selected);
                }
            }
        });

        //get box to & make selectable
        var boxB = lists.find("#cl_boxB");
        //init context
        context.boxB = boxB;
        //make selectable
        boxB.selectable({
            multiselect: false,
            //selected event
            selected: function (event, ui) {
                //store selected elements to global variable
                if (ui.selected != null)
                    selectedItem = ui.selected;
            }
        });

        //Add button - origin -> box A
        var addBtnOA = lists.find(".cl_addBtn_OA").click(function () {
            //check if box has item
            if (origin.size() <= 0)
                return;
            if (selectedItem != null) {
                //add to box from
                $(selectedItem).appendTo(boxA);
                //remove class to remove selected back-ground color
                $(selectedItem).removeClass("ui-selected");
                //remove from existing box
                $(origin).find($(selectedItem).id).remove();
                //set global selected item null
                selectedItem = null;
            }
        });

        //Remove button - box A -> origin
        var removeBtnOA = lists.find(".cl_removeBtn_OA").click(function () {
            //check if box has item
            if (boxA.size() <= 0)
                return;
            if (selectedItem != null) {
                //add to box to
                $(selectedItem).appendTo(origin);
                //remove class to remove selected back-ground color
                $(selectedItem).removeClass("ui-selected");
                //remove from existing box
                $(boxA).find($(selectedItem).id).remove();
                //set global selected item null
                selectedItem = null;
            }
        });

        //Add button - box A -> box B
        var addBtnAB = lists.find(".cl_addBtn_AB").click(function () {
            //check if box has item
            if (boxA.size() <= 0)
                return;
            if (selectedItem != null) {
                //add to box from
                $(selectedItem).appendTo(boxB);
                //remove class to remove selected back-ground color
                $(selectedItem).removeClass("ui-selected");
                //remove from existing box
                $(boxA).find($(selectedItem).id).remove();
                //set global selected item null
                selectedItem = null;
            }
        });

        //Remove button - box B -> box A
        var removeBtnAB = lists.find(".cl_removeBtn_AB").click(function () {
            //check if box has item
            if (boxB.size() <= 0)
                return;
            if (selectedItem != null) {
                //add to box to
                $(selectedItem).appendTo(boxA);
                //remove class to remove selected back-ground color
                $(selectedItem).removeClass("ui-selected");
                //remove from existing box
                $(boxB).find($(selectedItem).id).remove();
                //set global selected item null
                selectedItem = null;
            }
        });

        //for id purposes
        var i = 0;

        //*bind data
        //loop supplied data array
        $.each(settings.data, function (index, item) {
            //create li element
            var li = $("<li id='listItem" + i.toString() + "' class='cl_listItem' staffID='" + item.StaffName + "'></li>");
            //loop json object key value pair
            $.each(item, function (key, value) {
                //check data display name same with json key
                if (settings.dataDisplayName.toLowerCase() == key.toLowerCase()) {                    
                    li.text(value);
                    //store data within <li>
                    //li.data("data", item);
                    //append to origin
                    li.appendTo(origin);

                    //i++;
                }
                i++;
            });
        });


        //append lists to selected container
        this.empty().append(lists);

        //chaining
        return this;

    }; //end
})(jQuery);
